<template>
  <div style="width: 800px">
    <!-- 表头 -->
    <div class="table-wrapper">
      <div class="table-header" :style="{ paddingRight: viewHeight / itemHeight < crowdList.length ? '17px' : '0' }">
        <div class="checkbox"></div>
        <div :style="itemStyles(item)" v-for="item in columns" :key="item.key" class="table-header-item">
          {{ item.title }}
        </div>
      </div>
      <!-- 虚拟滚动列表 -->
      <div class="content">
        <VirtualList ref="leftContainer" :list="crowdList" :itemHeight="itemHeight" :viewHeight="viewHeight">
          <template #default="{ item }">
            <div class="checkbox">
              <a-checkbox
                :disabled="disabledItems.includes(item[fieldName])"
                :checked="mySelectedItems.includes(item[fieldName])"
                @change="handleCheckboxChange(item)"
              />
            </div>
            <div :style="itemStyles(col)" v-for="col in columns" :key="col.key" class="list-item">
              <div :style="itemStyles(col)">
                {{ col.customRender ? col.customRender({ record: item, text: item[col.dataIndex] }) : item[col.dataIndex] }}
              </div>
            </div>
          </template>
        </VirtualList>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import VirtualList from "./VirtualList.vue";
import { ref } from "vue";
import _ from "lodash";

// 定义列的接口
interface ColumnType {
  title: string;
  dataIndex: string;
  key: string;
  width?: number;
  customRender?: (options: { record: any, text: any }) => any;
}

const emit = defineEmits(["update:selectedItems"]);
const handleCheckboxChange = (item: any) => {
  if (mySelectedItems.value.includes(item[fieldName])) {
    mySelectedItems.value = mySelectedItems.value.filter((id) => id !== item[fieldName]);
  } else {
    mySelectedItems.value.push(item[fieldName]);
  }
  emit("update:selectedItems", mySelectedItems.value);
};

// 传递的参数
const { columns, crowdList, itemHeight, viewHeight, fieldName, disabledItems, selectedItems } = defineProps({
  columns: {
    type: Array as () => ColumnType[],
    default: () => [],
  },
  crowdList: {
    type: Array,
    default: [],
  },
  itemHeight: {
    type: Number,
    default: 30,
  },
  viewHeight: {
    type: Number,
    default: 300,
  },
  fieldName: {
    type: String,
    default: "id",
  },
  disabledItems: {
    type: Array,
    default: [],
  },
  selectedItems: {
    type: Array,
    default: [],
  },
});

const mySelectedItems = ref(_.cloneDeep(selectedItems));

const itemStyles = (item: ColumnType) => {
  let style: any = {};
  if (item.width) {
    style.width = `${item.width}px`;
  } else {
    style.flex = "1";
  }
  return style;
};
</script>

<style scoped lang="less">
.table-wrapper {
  position: relative;
  width: 100%;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
}

.table-header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  background-color: #f5f5f5;
  box-sizing: border-box;
}

.table-header-item {
  padding: 0 8px;
}

.content {
  height: 300px;
}

.checkbox {
  width: 50px;
  text-align: center;
}

.list-item {
  padding: 0 8px;
}
</style>
